<template>
    <div class="error-alert" v-if="isShowErrorAlert">
        <div class="error-alert_content border">
            <span class="e-a-message"> {{ message }} </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { toRefs, ref } from 'vue'
let isShow = ref<boolean>(false)

const props = defineProps({
    message: {
        type: String,
        default: ''
    },
    duration: {
        type: Number,
        default: 4000
    }
})
const { message, duration } = toRefs(props)

let isShowErrorAlert = ref<boolean>(false)
let timer: any = null
const showErrorAlert = () => {
    isShowErrorAlert.value = true
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        isShowErrorAlert.value = false
    }, duration.value)
}

defineExpose({
    showErrorAlert
})
</script>

<style lang="less" scoped>
.error-alert {
    position: fixed;
    bottom: 4rem;
    width: 100%;
    
    .error-alert_content{
        max-width: 93%;
        width: fit-content;
        min-height: 3rem;
        line-height: 1.5;
        margin: 0 auto;
        border-radius: .5rem;
        background-color: var(--alert-bg-color);
        padding: 0.7rem 1.2rem;

        .e-a-message {
            font-size: 14px;
            color: var(--alert-message-color);
        }
    }
}
</style>